import React,{CSSProperties} from 'react'
import { Checkbox } from "@material-ui/core"

const CheckFootStyle: CSSProperties = {
    padding: '0 4vw',
    height: '56px',
    position: 'fixed',
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 100,
    boxShadow: '0px -1px 6px rgb(0 0 0 / 10%)',
    backgroundColor: '#fff',
    display: 'flex',
    flexFlow: 'row nowrap',
    justifyContent: 'space-between',
    alignItems: 'center'
}
const checkBtnStyle: CSSProperties = {
    height: '40px',
    lineHeight: '40px',
    borderRadius: '35px',
    color: '#fff',
    backgroundColor: '#9c27b0',
    padding: '0 10vw',
    textAlign: 'center',
    fontSize: '14px'
}
const CheckFooter = () => {
    return (
        <div style={CheckFootStyle}>
            <div>
                <Checkbox color='secondary'/>
                <span style={{color: '#999',fontSize: '14px'}}>合计：</span><span style={{color: '#ff5757',fontSize: '14px',fontWeight: 'bolder'}}><span style={{fontSize: '12px'}}>￥</span>9772</span>
            </div>
            <div style={checkBtnStyle}>
                结算
            </div>
        </div>
    )
}

export default CheckFooter